<template class="my-top">
<!--  <div id="app">-->
    <div class="main-impt">

      <el-container style="height: 100%;width: 100%" direction="vertical">

        <!--头部-->
<!--        <el-header>
          <el-row class="top-row">
            <div>
              <el-col class="top-img">
              </el-col>
            </div>
            <el-col class="top-2">
              <el-row class="top-2-2">
                <el-col class="search-img" :span="3"></el-col>
                <el-col :span="13">
                  <input type="text" value="请输入关键词" style="background-color:rgb(102,102,102);line-height:28px;border: none;color: rgb(190,190,190);font-size: 14px">
                </el-col>
                <el-col :span="4">
                  <div class="my-menu-down">
                    <el-dropdown>
                    <span class="el-dropdown-link">
                      全部<i class=" el-icon&#45;&#45;right el-icon-caret-bottom"></i>
                    </span>
                      <el-dropdown-menu slot="dropdown" class="my-menu">
                        <el-dropdown-item class="menu-title">知网书</el-dropdown-item>
                        <el-dropdown-item class="menu-title">文章</el-dropdown-item>
                        <el-dropdown-item class="menu-title">编客</el-dropdown-item>
                        <el-dropdown-item class="menu-title">专题</el-dropdown-item>
                        <el-dropdown-item class="menu-title">讲座</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </el-col>
                <el-col :span="4" class="search-kung">
                <span>
                  搜 索
                </span>
                </el-col>
              </el-row>
            </el-col>
            <el-col class="top-nav">
              <el-menu mode="horizontal" class="top-nav-2">
                <el-menu-item index="1" background-color="#545c64" class="my-menu-it" >登录</el-menu-item>
                <span>|</span>
                &lt;!&ndash;              <el-menu-item index="1" disabled></el-menu-item>&ndash;&gt;
                <el-menu-item index="1">注册</el-menu-item>

                <el-submenu index="2" class="tow-item">
                  <template slot="title">个人中心</template>
                  <el-menu-item index="2-1" class="tow-item">我的书架</el-menu-item>
                  <el-menu-item index="2-2" class="tow-item">账单管理</el-menu-item>
                  <el-menu-item index="2-2" class="tow-item">&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;</el-menu-item>
                  <el-menu-item index="2-3" class="tow-item">个人资料</el-menu-item>
                  <el-menu-item index="2-3" class="tow-item">我关注的</el-menu-item>
                </el-submenu>

                <el-menu-item index="3" >购物车</el-menu-item>

                <el-menu-item index="3" >充值</el-menu-item>

                <el-menu-item index="3" >帮助</el-menu-item>
                &lt;!&ndash;              <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>&ndash;&gt;
              </el-menu>
            </el-col>
          </el-row>
        </el-header>-->
        <Top/>



        <SlideShow/>

        <!--轮播图-->
<!--        <template>
          <div class="block">
            <el-carousel height="450px" width="1000px">
              <el-carousel-item v-for="item in img" :key="item">
                <img :src="item" class="zou">
              </el-carousel-item>
            </el-carousel>
          </div>
        </template>-->

        <ContentFirst/>
        <!--主要区域-->
<!--        <el-main class="e-m-2">
          <div>
            <h3>丰富的讲座形式</h3>
            <span>图文、音频、视频、PPT...精彩纷呈</span>
          </div>
          <div class="e-m-22">
            <el-row :gutter="20" class="e-m-2-2">
              <el-col :span="6" class="e-m-2-2-col">
                <div class="e-m2-div">
                  <div class="e-m2-div-1">
                    <img src="https://bianke.cnki.net/resources/images/dachengForum/dcjt_icon1.png" alt="">
                    <span>
                    <em>
                       图文讲座
                    </em>
                  </span>
                  </div>
                  <div class="e-m2-div-2">
                  <span>
                      <em>
                        编写图文讲座
                      </em>
                  </span>
                    <p>
                      图文讲座以文字和图片为主要内容，可辅助插入音频、视频等多媒体内容，使讲座丰富多彩
                    </p>
                  </div>
                </div>
              </el-col>

              <el-col :span="6" class="e-m-2-2-col">
                <div class="e-m2-div content-2">
                  <div class="e-m2-div-1">
                    <img src="https://bianke.cnki.net/resources/images/dachengForum/dcjt_icon2.png" alt="">
                    <span>
                    <em>
                       音频讲座
                    </em>
                  </span>
                  </div>
                  <div class="e-m2-div-2">
                  <span>
                      <em>
                        发布音频讲座
                      </em>
                  </span>
                    <p>
                      音频讲座以音频为主要内容，可在摘要处辅助插入图文，使讲座内容更加充实完整
                    </p>
                  </div>
                </div>
              </el-col>
              <el-col :span="6" class="e-m-2-2-col">
                <div class="e-m2-div content-3">
                  <div class="e-m2-div-1">
                    <img src="https://bianke.cnki.net/resources/images/dachengForum/dcjt_icon3.png" alt="">
                    <span>
                    <em>
                       视频讲座
                    </em>
                  </span>
                  </div>
                  <div class="e-m2-div-2">
                  <span>
                      <em>
                        发布视频讲座
                      </em>
                  </span>
                    <p>
                      视频讲座以视频为主要内容，可在摘要处辅助插入图文，使讲座内容更加充实完整
                    </p>
                  </div>
                </div>
              </el-col>
              <el-col :span="6" class="e-m-2-2-col">
                <div class="e-m2-div content-4">
                  <div class="e-m2-div-1">
                    <img src="https://bianke.cnki.net/resources/images/dachengForum/dcjt_icon4.png" alt="">
                    <span>
                    <em>
                        PTT讲座
                    </em>
                  </span>
                  </div>
                  <div class="e-m2-div-2">
                  <span>
                      <em>
                        发布PTT讲座
                      </em>
                  </span>
                    <p>
                      PPT讲座以演示文稿的形式，可将图片、文字、音频、视频等内容融会贯通，更完整表达讲座内容
                    </p>
                  </div>
                </div>
              </el-col>

            </el-row>
          </div>
        </el-main>-->

        <ContentSecond/>
<!--
        <el-main class="e-m-3">
          <div>
            <el-row class="e-m-row">
              <div>
                <el-col :span="12" class="e-m-img">

                  <img src="./assets/dcjt_bg2.jpg" alt="">

                </el-col>
              </div>

              <el-col :span="12" class="e-m-text">
                <h1>

                  精彩的才学展示舞台
                </h1>
                <p>
                  专家、学者、教师、医生、艺术家...不论是草根还是大咖，我们不问出身，只要你有才，我们就给你舞台，任你展现无限精彩！
                </p>

              </el-col>
            </el-row>
          </div>

        </el-main>-->

        <ContentThird/>
<!--        <el-main class="e-m-4">
          <div>
            <el-row class="e-m-row">


              <el-col :span="12" class="e-m-text">
                <div class="e-m-h1">


                  <h1 >
                    多样的讲座应用场景
                  </h1>
                  <p>
                    课堂实录、习题讲解、专题讲座、经典诵读、作品讲评......

                    有料你就讲出来！
                  </p>
                </div>
              </el-col>


              <div>
                <el-col :span="12" class="e-m-img">

                  <img src="./assets/dcjt_bg3.jpg" alt="">

                </el-col>
              </div>


            </el-row>
          </div>
        </el-main>-->


        <ContentFourth/>

<!--        <el-main class="e-m-5">

          <el-row>

            <el-col :span="12">
              <div>
                <h1>便捷的讲座发布系统</h1>
                <p>
                  智能便捷的讲座发布系统，三步让你轻松有料你就讲出来！
                </p>
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <img src="./assets/dcjt_bg4.jpg" alt="">
              </div>
            </el-col>

          </el-row>

        </el-main>-->
        <ContentFifth/>
<!--        <el-main class="e-m-6">
          <el-row>
            <el-col :span="12">
              <div>
                <img src="./assets/dcjt_bg5.jpg" alt="">
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <h1>
                  智慧创造财富的平台
                </h1>
                <p>
                  您的内容被读者订阅，可直接参与销售受益分成！

                  真正享受授知识、智慧创造财富的乐趣！
                </p>
              </div>
            </el-col>
          </el-row>
        </el-main>-->

        <ContentSixth/>
<!--
        <el-main class="e-m-7">
          <span class="e-m-7-text">精品讲座</span>
          <el-row :gutter="0" class="e-m-7-row">
            <el-col :span="6">
              <div class="m7-di1">
                <span>视频讲座</span>
                <img src="https://bianke.cnki.net/resources/imagesTemp/dachengForum/b1.jpg" alt="" >
                <h4>书法欣赏入门</h4>
                <p>李小燕</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="m7-di1">
                <span>音频讲座</span>
                <img src="https://bianke.cnki.net/resources/imagesTemp/dachengForum/b2.jpg" alt="" width="281px" height="210">
                <h4>再别康桥</h4>
                <p>喵喵</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="m7-di1">
                <span>视频讲座</span>
                <img src="https://bianke.cnki.net/resources/imagesTemp/dachengForum/b3.jpg" alt="" width="281px" height="210">
                <h4>书法欣赏入门</h4>
                <p>李小燕</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="m7-di1">
                <span>视频讲座</span>
                <img src="https://bianke.cnki.net/resources/imagesTemp/dachengForum/b4.jpg" alt="" width="281px" height="210">
                <h4>书法欣赏入门</h4>
                <p>李小燕</p>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="0" class="e-m-7-row2">
            <el-col :span="6">
              <div class="m7-di1">
                <span>音频讲座</span>
                <img src="https://bianke.cnki.net/resources/imagesTemp/dachengForum/b5.jpg" alt="" width="281px" height="210">

                <h4>书法欣赏入门</h4>
                <p>李小燕</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="m7-di1">
                <span>图文讲座</span>
                <img src="https://bianke.cnki.net/resources/imagesTemp/dachengForum/b6.jpg" alt="" width="281px" height="210">
                <h4>初中阶段</h4>
                <p>完强</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="m7-di1">
                <span>图文讲座</span>
                <img src="https://bianke.cnki.net/resources/imagesTemp/dachengForum/b7.jpg" alt="" width="281px" height="210">
                <h4>中学生涯</h4>
                <p>吕常荣</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="m7-di1">
                <span>视频讲座</span>
                <img src="https://bianke.cnki.net/resources/imagesTemp/dachengForum/b8.jpg" alt="" width="281px" height="210">
                <h4>书法欣赏入门</h4>
                <p>李小燕</p>
              </div>
            </el-col>
          </el-row>
          <span class="e-m-7-text2">发布讲座</span>
        </el-main>
-->


        <!--页脚-->
        <Bottom/>
<!--        <el-footer >
          <div class="footer">
            <el-row class="footer-row" >
              <el-col :span="4">
                <div class="footer-di1">
                  <span>新手上路</span>


                  <p>注册会员账号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如何为账户充值</p>

                  <p>如何查找知网书&nbsp;&nbsp;如何购买知网书</p>

                  <p>如何阅读知网书&nbsp;&nbsp;下载阅读器</p>

                </div>
              </el-col>
              <el-col :span="4">
                <div class="footer-di1">
                  <span>支付方式</span>


                  <p>银联在线 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;支付宝</p>

                  <p>会员卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多支付方式</p>

                  <p>发票索取>></p>

                </div>
              </el-col>
              <el-col :span="4">
                <div class="footer-di1">
                  <span>认证专区</span>


                  <p>主编认证  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主编特权</p>



                </div>
              </el-col>
              <el-col :span="4">
                <div class="footer-di1">
                  <span>关于我们</span>


                  <p>关于大成编客 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;联系我们</p>

                  <p>友情连接 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网站声明</p>


                </div>
              </el-col>
              <el-col :span="4">
                <div class="footer-di1">
                  <el-row>
                    <el-col :span="12" class="foot-wei2">
                      <img src="https://bianke.cnki.net/resources/images/header-and-footer/hf11.gif" alt="" width="70px" height="70px">
                    </el-col>
                    <el-col :span="12" class="foot-wei1">
                      <div class="foot-wei">
                        <h4>官方微信</h4>
                        <span>扫描二维码</span>
                        <span>轻松关注</span>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12" class="sina2">
                      <img src="./assets/platForm8-sina.gif" alt="">

                    </el-col>
                    <el-col :span="12" class="sina">
                      <div >
                        <p>新浪微博</p>
                        <em class="care">立即关注</em>
                        &lt;!&ndash;                    <p class="care"></p>&ndash;&gt;
                      </div>
                    </el-col>

                  </el-row>
                </div>
              </el-col>

            </el-row>

            &lt;!&ndash;          <div class="foot-textfo">

                      </div>&ndash;&gt;
            <i class="foot-textfo">
              数字出版：《中国学术期刊（光盘版）》电子杂志社有限公司

              京ICP证040431号 网络出版服务许可证(总)网出证(京)字第271号 京公网安备11010802020460号
            </i>
            <img src="https://bianke.cnki.net/resources/images/header-and-footer/hf-ba1.gif" alt="" class="foot-img">
          </div>

        </el-footer>-->


      </el-container>

    </div>
<!--  </div>-->
</template>

<script>

import Top from "./components/Top";
import SlideShow from "./components/SlideShow";
import ContentFirst from "./components/ContentFirst";
import ContentSecond from './components/ContentSecond'
import ContentThird from './components/ContentThird'
import ContentFourth from "./components/ContentFourth";
import ContentFifth from "./components/ContentFifth";
import ContentSixth from "./components/ContentSixth";
import Bottom from "./components/Bottom";


export default {
  name: 'App',
  components: {
    Top,
    SlideShow,
    ContentFirst,
    ContentSecond,
    ContentThird,
    ContentFourth,
    ContentFifth,
    ContentSixth,
    Bottom
  },
  data() {
    return {
      img: [
        'https://bianke.cnki.net/resources/imagesTemp/platForm/index-pic180527.jpg',
        'https://bianke.cnki.net/resources/imagesTemp/platForm/index-pic2021102803.jpg',
        'https://bianke.cnki.net/resources/imagesTemp/platForm/index-pic2021102801.jpg'
      ]
    }
  }
}
</script>

<style >
  html,
  body,
  .my-top,
  .main-impt,
  el-container {
    width: 100%;
    margin: 0px;
    padding: 0px;
  }
  /*scoped这个属性让css样式只作用于此页面*/

  /*.row1 {
    background-image: url("../assets/hf3-headerBg.gif");
    background-repeat: repeat;
    height: 54px;
  }
  .row3 {
    background-color: aqua;
  }*/

/*  .main-impt, .my-top{
    !*  position: absolute;
      padding: 0px;
      margin: 0px;
      width: 100%;*!
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }*/

  /*头部css*/
/*  .top-img {
    background-image: url("./assets/hf12-logo3.jpg");
    background-repeat: no-repeat;
    height: 25px;
    position: absolute;
    margin-left: 350px;
    width: 177px;
    margin-top: 16px;
  }
  .top-2 {
    !*  position: absolute;*!


    padding-left: 600px;
    margin-top: 15px;
  }
  .top-2-2 {
    !*position: absolute;*!

    background-color: rgb(102,102,102);
    width: 400px;
    border-radius: 15px;
  }
  .search-img {
    background-image: url("./assets/hf5-searchIcon.gif");
    height: 30px;
    background-repeat: no-repeat;
    position: relative;
  }
  .my-menu {
    background-color: rgb(102,102,102);
    color: rgb(241,235,222);
  }
  .search-kung {
    background-color: rgb(198, 167, 85);
    height: 30px;
    border-radius: 0px 15px 15px  0px;
    color: white;

    font-size: 14px;
  }
  .search-kung:hover {
    background-color: rgb(215, 192, 114);
  }
  .search-kung span {
    margin-left: 12px;
    margin-top: 5px;
    display: block;
  }
  .menu-title {
    color: rgb(241,235,222);
  }
  .menu-title:hover {
    color: black;
    background-color: rgb(241,235,222);
  }
  .el-dropdown-link {
    cursor: pointer;
    color: rgb(153,153,153);
  }
  .my-menu-down {
    margin-top: 4px;
  }
  .top-nav {
    position: absolute;
    width: 700px;
    margin-left: 1100px;
  }
  .top-nav-2 {
    background-color: black;
    !*color: rgb(150, 162, 167);*!

  }
  .mine {
    color: rgb(150, 162, 167);
  }
  .el-menu-item {
    color: rgb(150, 162, 167);
    !*padding-left: 0px;*!

  }
  .my-menu-it:hover {
    color: white;
  }

  .el-header {
    background-image: url("./assets/hf3-headerBg.gif");
    background-repeat: repeat;
    height: 54px;

    !* position: relative;*!
  }*/


  .el-footer {
    /*  background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;*/
  }
  /*第一个main*/
  .e-m-1 {
    background: url("./assets/dcjt_banner.jpg") no-repeat center;
    height: 501px;
    position: relative;
  }

  /*轮播css*/
/*
  .zou {
    height: 450px;
    width: 100%;
  }
  .block-1 {
    background-color: #42b983;
    height: 450px;
  }
*/

 /* 第二个mainCss*/
/*
  .e-m-1-bt {
    width: 180px;
    height: 60px;
    margin-top: 352px;

    border-radius: 8px;
    color: #fdfdfd;
    position: absolute;

    margin-left: -100px;
    !* background: -moz-linear-gradient(top, #da4e4e 0%, #2c41a6 100%);*!
    background-color: rgb(251, 146, 28);
  }

  .e-m-2 {
    background: url("./assets/dcjt_bg1.jpg") no-repeat center;
    height: 629px;
    text-align: center;
    !*position: relative;*!
  }
  .e-m-22 {
    margin-left: 120px;
  }
  .e-m-2-2 {
    !*  position: absolute;
      width: 1500px;*!
    width: 1500px;
    position: relative;

    margin-left: 100px;

  }
    .e-m2-div-2 {
    height: 50%;
    background-color: rgb(255, 255, 255);
    border-top: 1px rgb(228,244,225) solid;
  }
    .e-m2-div-1 {
    height: 50%;
    background-color: rgb(246, 255, 244);
  }
  .e-m-2-2-col {
    !*  width: 200px;
      padding-left: 70px;
      height: 350px;*!
    !*position: absolute;*!
    height: 400px;
  }*/





  .e-m-2-2-col .e-m2-div{

    margin-top: 30px;
    border: solid 1px rgb(233,232,232);
    width: 280px;
    margin-left: 85px;
    height: 400px;
  }

  .e-m2-div-1 img {
    height: 95px;
    margin-top: 45px;
  }
  .e-m2-div-1 span {
    display: block;
    margin-top: 20px;

  }
  .e-m2-div-1 span em {
    font-size: 18px;
    font-style: normal;
    color: rgb(105,105,105);
    margin-top: 43px;
    display: block;
  }

  .e-m2-div-2 span {
    display: block;
    padding-top: 40px;
  }
  .e-m2-div-2 span em {
    display: block;
    font-style: normal;
    font-size: 20px;
    background-color: rgb(113, 200, 99);
    color: white;
    line-height: 42px;
    width: 220px;
    margin-top: 20px;
    border-radius: 6px ;
    margin-left: 29px;
    height: 42px;
  }
  .e-m2-div-2 p {
    color: rgb(105,105,105);
    font-size: 14px;
    text-align: left;
    display: block;
    width: 220px;
    margin-left: 32px;
    padding-left: 2px;
    line-height: 25px;

  }
  .content-2 .e-m2-div-1{
    background-color: rgb(245, 250, 255);
    border-top: 1px rgb(225,239,250) solid;
  }
  .content-2 .e-m2-div-2 span em {
    background-color: rgb(98, 171, 233);
  }
  .content-3 .e-m2-div-1{
    background-color: rgb(252, 246, 243);
    border-top: 1px rgb(255,232,219) solid;
  }
  .content-3 .e-m2-div-2 span em {
    background-color: rgb(255, 134, 72);
  }
  .content-4 .e-m2-div-1{
    background-color: rgb(251, 247, 255);
    border-top: 1px rgb(245,237,250) solid;
  }
  .content-4 .e-m2-div-2 span em {
    background-color: rgb(196, 145, 232);
  }
  .e-m-2 h3 {
    font-size: 55px;
    margin-top: 14px;
  }
  .e-m-2 span {
    font-size: 22px;
    display: block;
    margin-top: -30px;
  }




/*  .e-m-row {
    text-align: center;
  }*/


  .e-m-row .e-m-img img {
    margin-left: 100px;
  }
  .e-m-row .e-m-text h1 {
    font-size: 45px;
    padding-right: 420px;
    margin-top: 120px;
    font-weight: normal;
    display: block;
  }
  .e-m-row .e-m-text p{
    display: block;
    width: 400px;
    margin-top: -20px;
    line-height: 30px;
    margin-left: 50px;
    text-align: left;
  }




/*
  .e-m-4 {
    background-color: rgb(98, 186, 226);
  }
*/

  /*.e-m-3 {
    margin-top: 100px;
  }*/
  /*.e-m-4 .e-m-img {

  }*/

/*
  .e-m-4 .e-m-img img{
    padding-right: 400px;
  }
  .e-m-4 .e-m-row .e-m-text {
    position: relative;
  }
  .e-m-4 .e-m-row .e-m-text .e-m-h1 {
    color: white;
    position: relative;
    width: 600px;
    margin-left: 260px;
  }
  .e-m-4 .e-m-row .e-m-text .e-m-h1 h1 {
    width: 600px;
  }
  .e-m-4 .e-m-row .e-m-text .e-m-h1 p {
    display: block;
    padding-left: 52px;
  }
*/





/*  .e-m-5 {
    background-color: white;
  }
  .e-m-5 div {
    text-align: center;
  }
  .e-m-5 div img {
    margin-right: 200px;
    margin-top: -20px;
  }
  .e-m-5 div h1 {
    font-size: 45px;
    display: block;
    font-weight: normal;
    margin-top: 140px;
    margin-left: 200px;
  }
  .e-m-5 div p {
    line-height: 30px;
    display: block;
    margin-left: 220px;
  }
  */


/*
  .e-m-6 {
    background-color: rgb(254, 198, 22);
    text-align: center;
  }
  .e-m-6 div img {
    margin-left: 200px;
  }
  .e-m-6 div h1 {
    font-size: 45px;
    display: block;
    margin-right: 250px;
    font-weight: normal;
    margin-top: 140px;
  }
  .e-m-6 div p {
    display: block;
    width: 400px;
    text-align: left;
    margin-left: 140px;
  }
*/
 /* m-7*/
/*
  .e-m-7 {
    width: 1500px;
    margin: 0px auto;
    margin-top: 30px;
    text-align: center;
  }
  .e-m-7 span {
    font-size: 35px;
    font-weight: 500;
    margin-top: 20px;
  }

  .e-m-7 .m7-di1:hover {
    background-color: rgb(245, 228, 221);
    border: 1px solid rgb(236, 127, 85);
  }
  .e-m-7 .m7-di1 {
    position: relative;
    margin-right: 20px;
    border: 1px solid rgb(237, 237, 237);
  }
  .e-m-7 .m7-di1 h4 {
    display: block;
    margin-top: 10px;
    margin-right: 0px;
  }
  .e-m-7 .m7-di1 p {
    display: block;
    margin-top: -15px;
    font-size: 15px;
    margin-right: 220px;
  }
  .e-m-7-row2 {
    margin-top: 25px;
  }
  .e-m-7 .m7-di1 img {
    padding-top: 20px;
  }

  .e-m-7 el-col {
    background-color: #42b983;
  }
  .e-m-7 .e-m-7-text {
    padding-bottom: 40px;
    display: block;
  }
  .e-m-7 .m7-di1 span {
    margin-top: 40px;
    margin-left: 210px;
    display: block;
    position: absolute;
    height: 30px;
    width: 80px;
    line-height: 30px;
    border-radius: 20px;
    font-size: 13px;
    color: white;
    background-color: rgba(23, 22, 22, 0.6);
  }
  .e-m-7 .e-m-7-text2 {

    display: block;
    border-radius: 30px;
    height: 50px;
    line-height: 50px;
    font-size: 25px;
    margin: 70px auto;
    width: 250px;
    color: white;
    background-color: rgb(251, 183, 86);
  }

  */

  .el-main {
    /*  background-color: #E9EEF3;
      color: #333;*/
    /* text-align: center;*/

  }/*
  .footer {
    background-color: rgb(68, 68, 68);
    !* height: 280px;*!
    height: 350px;
  }
  .footer .footer-row {

    !* background-color: #42b983;*!
    !*  margin: 10px auto;*!
    margin-left: 300px;
    height: 200px;
    width: 1500px;
  }
  .footer .footer-row .footer-di1 {
    !*  border: 1px solid black;*!
    height: 170px;

    background-color: rgb(87, 87, 87);
    width: 200px;
    padding-left: 45px;
  }
  .footer .footer-row .footer-di1 span {
    display: block;
    font-size: 18px;
    color: white;
    padding-top: 20px;
    padding-bottom: 10px;
  }
  .footer .footer-row el-col {
    !*  margin-left: 20px;*!
  }
  .footer .footer-row .footer-di1 img {
    padding-top: 20px;
  }
  .footer .footer-row .footer-di1 .foot-wei2 {

    width: 88px;
  }
  .footer .footer-row .footer-di1 .foot-wei1 {


  }
  .footer .footer-row .footer-di1 .foot-wei {

  }
  .footer .footer-row .footer-di1 .foot-wei h4{
    color: white;
    font-weight: normal;
    margin-top: 22px;
    padding-right: 20px;
    display: block;
  }
  .footer .footer-row .footer-di1 .foot-wei span {
    display: block;
    font-size: 12px;
    margin-top: -30px;
  }
  .footer .footer-row .footer-di1 pre {
    display: block;
    color: white;
    font-size: 9px;
    background-color: black;
    padding-right: 100px;
    width: 140px;
  }
  .sina2 {
    width: 45px;
  }

  .sina {

    width: 170px;
    margin-left: 50px;
    height: 200px;
  }
  .sina .care {
    display: block;
    margin-left: 80px;
    margin-top: -27px;
    font-size: 13px;
    background-color: #fdfdfd;
    color: black;
    height: 20px;
    line-height: 20px;
    width: 55px;
    font-style: normal;
  }
  .sina p{
    font-size: 20px;
    display: block;
    margin-top: -24px;

  }
  .footer .footer-row .footer-di1 P{
    display: block;
    color: white;
    line-height: 20px;
    font-size: 8px;
  }
  .foot-textfo {
    margin-top: 20px;
    text-align: center;
    font-weight: normal;
    position: absolute;
    height: 100px;
    display: block;
    margin-left: 700px;
    width: 500px;
    padding-top: -100px;
    font-style: normal;
    color: #fdfdfd;
    font-size: 14px;
    line-height: 30px;
  }
  .foot-img {
    margin-left: 1400px;
    margin-top: 30px;
    position: absolute;
    display: block;
  }*/
  el-main {

  }
</style>


<!--<style>
  html,
  body,
  .main-impt
  el-con{
    height: 100%;
    margin: 0px;
    padding: 0px;
    width: 100%;
  }
</style>-->
